<template>
<div class="navbar">
  <van-nav-bar
      @click-left="onClickLeft"
  >
    <template #title>
      <div class="title">{{item.name}}</div>
    </template>
    <template #left>
      <img class="arrow" src="@/assets/img/message/message_back.png">
    </template>
    <template #right>
      <button>店铺</button>
      <img class="setting" src="@/assets/img/message/message_setting.png">
    </template>
  </van-nav-bar>
</div>
</template>

<script>
import Vue from 'vue';
import { NavBar } from 'vant';

Vue.use(NavBar);
export default {
name: "navbar",
  props:{
  item:{
    type:Object
  }
  },
  methods:{
    onClickLeft(){
      this.$router.back();
    },
  },
}
</script>

<style scoped>
.van-nav-bar{
  background-color: #F3F3F3;
}
.title{
  font-size: .5rem;
  font-weight: 550;
}
.arrow{
  width: .4rem;
  height: .4rem;
}
button{
  color: #fff;
  background: linear-gradient(to right,#FB9303,#F55C0D);
  border: none;
  padding: .15rem .3rem;
  border-radius: .6rem;
}
.setting{
  margin-left: .2rem;
  width: .6rem;
  height: .7rem;
}
</style>